<template>
	<view class="page_cont">
		<view class='search_box'>
			<view class='search_wrap'>
				<view class='box_wrap'>
					<image class='icon' src="/static/icon26.png"></image>
					<input type="text" class='input' placeholder="搜索单位名称" confirm-type="search" :focus="focus" @input="input_search" @confirm="confirm_search">
				</view>
				<view class='search_btn' @click="confirm_search()">搜索</view>
			</view>
		</view>
		<view class='page' v-show='show_page==1'>
			<view class='img_box'><image class='img' src="https://ossdev0.jiabala.com/C6s45P3kaKrhk" mode="widthFix"></image></view>
			<view class='text'>1、学校单位（用人单位）已经入驻家巴啦平台， 可以在通过搜索进行绑定身份即可；</view>
			<view class='text'>2、没有入驻的学校单位，则需要进行点击下方 按钮进行资料提交入驻。</view>
			<view class='add' @click="nav_add()">入驻</view>
		</view>
		<view class='page_list' v-show='show_page==2'>
			<mechItem :mechs="mechs" :status="2" v-if="mechs.length>0"></mechItem>
			<view class='cont_wrap'>
				<view class='no_cont' v-if="show_nav">
					<view class="no_box">
					    <view class='title'>暂无机构信息</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MechItem from "../../components/mechItem.vue"
	import resume from "../../api/myResume.js"
	import util from "../../utils/util.js"
	export default{
		data(){
			return {
				queryList:{
					keyword: "",
					lat:'22.80536',
					lng:'113.29321',
					type:2,
					currentPage:1,
					pageSize:8
				},
				show_page: 1,
				mechs: [],
				show_nav: false,
				focus: false,
				isRequest:true
			}
		},
		onLoad() {
			const value = uni.getStorageSync('user_address')
			// console.log(value);
			this.queryList.lat = value.lat
			this.queryList.lng = value.lng
		},
		methods:{
			// 输入
			input_search(e){
				this.queryList.keyword=e.detail.value;
				this.focus=true
			},
			// 搜索
			confirm_search(e){
				this.show_page=2
				this.show_nav=false
				this.queryList.currentPage=1
				this.focus=false
				//#ifdef H5 
					this.queryList.lat='22.80536'
					this.queryList.lng='113.29321'
				//#endif
				uni.showLoading({})
				resume.search_org(this.queryList).then(res=>{
					uni.hideLoading()
					// console.log(res);
					if(res.data.code=='200'){
						var list=res.data.data.records;
						list.forEach((item)=>{
							item.space=item.distance>1000?(item.distance/1000).toFixed(2):item.distance;
						})
						this.mechs=list
						if(list.length==0){
							this.show_nav=true
						}
					}
				})
			},
			// 入驻
			nav_add(){
				uni.navigateTo({
					url: '../addMech/addMech'
				})
			},
			onReachBottom(){
				if(this.isRequest){
					this.queryList.currentPage += 1
					uni.showLoading({})
					resume.search_org(this.queryList).then(res=>{
						uni.hideLoading()
						// console.log(res.data.data.records.length);
						if(res.data.data.records.length<=0){
							util.page_show_toast("没有更多了",1500)
							this.isRequest=false
						}else{
							res.data.data.records.forEach((item)=>{
								item.space=item.distance>1000?(item.distance/1000).toFixed(2):item.distance;
							})
							this.mechs=this.mechs.concat(res.data.data.records)
							this.isRequest=true
						}
					})
				}else{
					util.page_show_toast("没有更多了",1500)
				}
			},
		},
		components:{
			mechItem: MechItem
		}
	}
</script>

<style lang="scss">
	.page_cont{
		width: 100%;
		.search_box{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 4rpx 32rpx 16rpx 32rpx;
			background: #fff;
			z-index: 200;
			.search_wrap{
				width: 100%;
				display: flex;
				flex-direction: row;
				background: #F6F7F9;
				border-radius: 12rpx;
				.box_wrap{
					flex: 1;
					padding: 12rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.icon{
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}
					.input{
						flex: 1;
						height: 40rpx;
						font-size: 28rpx;
						font-weight: 500;
						line-height: 40rpx;
						color: rgba(146,155,167,0.81);
					}
				}
				.search_btn{
					width: 120rpx;
					height: 64rpx;
					text-align: center;
					line-height: 64rpx;
					background: #5B90FF;
					border-radius: 12rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(255,255,255,0.81)
				}
			}
		}
		.page{
			width: 100%;
			padding-top: 116rpx;
			.img_box{
				width: 648rpx;
				margin: 0 auto 48rpx auto;
				.img{
					width: 100%;
				}
			}
			.text{
				width: 648rpx;
				margin: 0 auto 24rpx auto;
				font-size: 30rpx;
				font-weight: 400;
				line-height: 48rpx;
				color: #3F4A58;
			}
			.add{
				position: fixed;
				bottom: 32rpx;
				left: 32rpx;
				width: 686rpx;
				height: 104rpx;
				text-align: center;
				line-height: 104rpx;
				font-size: 36rpx;
				font-weight: 400;
				color: #fff;
				background: #5B90FF;
				border-radius: 16rpx;
			}
		}
		.page_list{
			width: 100%;
			padding-top: 84rpx;
			background: #F6F7F9;
			.cont_wrap{
				background: #fff;
				.no_cont{
					width: 520rpx;
					margin: 0 auto;
					padding-top: 240rpx;
					.no_box{
						width: 100%;
						height: 520rpx;
						box-sizing: border-box;
						padding-top: 360rpx;
						background: url("https://ossdev0.jiabala.com/4B57SRMriNNbG") no-repeat 0 0/100% 100%;
						.title{
							text-align: center;
							height: 50rpx;
							font-size: 32rpx;
							font-weight:400;
							line-height: 50rpx;
							color: #3F4A58;
						}
						.text{
							margin-top: 8rpx;
							text-align: center;
							height: 40rpx;
							font-size: 28rpx;
							font-weight:400;
							line-height: 40rpx;
							color: #798594;
						}
					}
				}
			}
		}
	}
</style>
